<template>
  <!--设置父级-->
  <el-dialog
    :title="popType != 4 ? '设置主客户' : '设置子客户'"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible9"
    width="400px">
    <div style="max-height: 500px;overflow: auto">
      <el-form :inline="true" size="mini" label-width="100px" ref="fjForm" :model="fjForm" :rules="fjrules">
        <el-form-item label="选择主客户：" prop="parentId" v-if="popType != 4">
          <el-select
            v-if="popType == 1"
            clearable
            v-model="fjForm.parentId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入客户名称"
            :remote-method="remoteMethod1"
            :loading="customerLoading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
          <el-select
            v-if="popType == 3"
            clearable
            v-model="fjForm.parentId"
            placeholder="请选择客户">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择子客户：" prop="sonId" v-else>
          <el-select
            clearable
            v-model="fjForm.sonId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入客户名称"
            :remote-method="remoteMethod2"
            :loading="customerLoading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button @click="handleClose9" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirm9" :loading="btnLoading10" size="small">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {getParentCustomer,updateParent,getSonList} from '@/api/company'
import store from '@/store'
import { mapGetters } from 'vuex'




const defaultfjForm = {
  parentId:'',
  sonId:'',
  customerId:'',
  type:''
};
export default {
  name: "index",
  data(){
    return {
      dialogVisible9:false,
      fjForm:JSON.parse(JSON.stringify(defaultfjForm)),
      btnLoading10:false,
      customerList:[],
      customerLoading:false,
      popType:'',
      fjrules:{
        parentId:[{required: true, message: '请选择主客户', trigger: 'change'},],
        sonId:[{required: true, message: '请选择子客户', trigger: 'change'},],
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{

    //获取父客户列表
    remoteMethod1(query) {
      if(query && query!= ''){
        this.customerLoading = true;
        getParentCustomer({customerName:query,customerId:this.fjForm.customerId}).then(response => {
          this.customerList = response;
          this.customerLoading = false;
        }).catch(()=>{
          this.customerLoading = false;
        });
      }
    },

    //获取子客户列表
    remoteMethod2(query) {
      if(query && query!= ''){
        this.customerLoading = true;
        getSonList({customerName:query,customerId:this.fjForm.customerId}).then(response => {
          this.customerList = response;
          this.customerLoading = false;
        }).catch(()=>{
          this.customerLoading = false;
        });
      }
    },

    //显示父级公司
    showfj(type,type2,parentId,parentName,sonCustomer,customerId){
      this.dialogVisible9 = true;
      this.popType = type;
      this.customerList = [];
      this.fjForm =JSON.parse(JSON.stringify(defaultfjForm));
      this.fjForm.type = type;
      this.fjForm.customerId = customerId;
      if(type == 3){
        this.customerList = sonCustomer
      }else if(type == 1 && type2 == 'edit'){
        this.fjForm.parentId = parentId;
        this.customerList.push({customerId:parentId,customerName:parentName})
      }
    },
    //关闭关联公司弹窗
    handleClose9(){
      this.dialogVisible9 = false;
    },

    //提交关联公司
    handleConfirm9(){
      this.$refs.fjForm.validate((valid) => {
        if (valid) {
          this.btnLoading10 = true;
          updateParent(this.fjForm).then(()=>{
            this.btnLoading10 = false;
            this.handleClose9();
            this.$emit('update')
          }).catch(()=>{
            this.btnLoading10 = false;
          })
        }
      })
    },
  },
}
</script>

<style  lang="scss">

</style>
